<script>
import searchImg from '@/assets/images/search.png'
export default {
  props: {
    'has-border': Boolean,
    'inner-bg': String,
    'outer-bg': String
  },

  data() {
    return {
      searchImg
    }
  },

  methods: {
    search() {
      this.$router.push({
        name: 'search',
        query: {
          keywords: ''
        }
      })
    }
  }
}
</script>

<template>
  <div 
    class="search-wrap" 
    :style="{ backgroundColor: outerBg }"
    @click="search"
  >
    <div
      :class="{ border: hasBorder }"
      :style="{ backgroundColor: innerBg }"
    >
      <img :src="searchImg" alt="">
      <span>想吃什么搜这里，比如：川菜</span>
    </div>
  </div>
</template>

<style lang="scss">
@import "@/assets/border.scss";

.search-wrap {
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .1rem .15rem;

  > div {
    height: .4rem;
    width: 100%;
    /* background: #eee; */
    display: flex;
    justify-content: center;
    align-items: center;

    @include border_1px(1px, #ee7530, 0.08rem);

    img {
      width: .16rem;
      margin-right: .05rem;
    }
    span {
      color: #666;
    }
  }
}

</style>
